<template>
	<div>
		<el-dialog width="200vh" title="申请采购" :visible.sync="dialogVisible" :close-on-click-modal="false">
			<el-form ref="searchForm" :inline="true" :model="searchForm">
				<el-form-item label="商品名称">
					<el-input v-model="searchForm.goods_name" placeholder="请输入商品名称" clearable />
				</el-form-item>
				<el-form-item label="商品品牌">
					<el-select v-model="searchForm.brand" filterable placeholder="请选择商品品牌" clearable style="width: 170px;">
						<el-option v-for="item in options1" :key="item.brand" :label="item.brand" :value="item.brand">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="商品类目">
					<el-select v-model="searchForm.category" filterable placeholder="请选择商品类目" clearable style="width: 170px;">
						<el-option v-for="item in options2" :key="item.category" :label="item.category" :value="item.category">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="成新度">
					<el-select v-model="searchForm.is_new" filterable placeholder="请选择成新度" clearable style="width: 170px;">
						<el-option v-for="item in options3" :key="item.is_new" :label="item.is_new" :value="item.is_new">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-button size="small" type="primary" @click="search()">查询</el-button>
					<el-button size="small" @click="reset()">重置</el-button>
				</el-form-item>
			</el-form>
			<el-divider />
			<div style="padding:0 30px">
				<div class="flex align-center table-top-btns">
					<h5 class="flex align-center">
						<svg-icon style="margin-right:15px" icon-class="list" :size="15" />数据列表
					</h5>
				</div>
				<el-table v-show="tableData.length > -1" :data="tableData" border>
					<el-table-column align="center" prop="id" label="商品ID" />
					<el-table-column align="center" prop="goods_no" label="商品编号" />
					<el-table-column align="center" prop="create_time" label="报价时间" width="120" />
					<el-table-column align="center" prop="category" label="类目" />
					<el-table-column align="center" prop="brand" label="品牌" />
					<el-table-column align="center" prop="goods_name" label="商品名称" />
					<el-table-column align="center" prop="is_new" label="成新度">
						<template slot-scope="scope">
							{{ scope.row.is_new == 100 ? '全新' : scope.row.is_new == 98 ? '98新' : scope.row.is_new == 95 ? '95新' : '90新' }}
						</template>
					</el-table-column>
					<el-table-column align="center" prop="color" label="颜色" />
					<el-table-column align="center" prop="run_memory" label="运行内存" />
					<el-table-column align="center" prop="memory" label="内存" />
					<el-table-column align="center" prop="website_price" label="官网价" />
					<el-table-column align="center" prop="is_invoice" label="是否含票">
						<template slot-scope="scope">
							{{ scope.row.is_invoice == 1 ? '是' : '否' }}
						</template>
					</el-table-column>
					<el-table-column align="center" prop="is_remote" label="是否远程">
						<template slot-scope="scope">
							{{ scope.row.is_remote == 1 ? '是' : '否' }}
						</template>
					</el-table-column>
					<el-table-column align="center" prop="price" label="报价金额" width="150">
						<template slot-scope="scope">
							<div v-if="!scope.row.isEdit">{{ scope.row.price }}</div>
							<div v-else>
								<el-input v-model="scope.row.price"></el-input>
							</div>
						</template>
					</el-table-column>
					<el-table-column align="center" prop="price1" label="报价金额1" width="150">
						<template slot-scope="scope">
							<div v-if="!scope.row.isEdit">{{ scope.row.price1 }}</div>
							<div v-else>
								<el-input v-model="scope.row.price1"></el-input>
							</div>
						</template>
					</el-table-column>
					<el-table-column fixed="right" align="center" label="操作" width="200px">
						<template slot-scope="scope">
							<el-button @click="handleClick(scope.row)" size="small" type="scuess">申请采购</el-button>
						</template>
					</el-table-column>
				</el-table>
				<custom-page ref="customPage" :total="total" @getList="getList" />
			</div>
			<goods-dialog ref="goodsDialog" dialog-width="1340px" :page-size="12" :append-to-body="true"
				:show-type-select="true" :show-checked-tool="true" @setSelect="setSelect" />
		</el-dialog>
		<el-dialog title="提示" :visible.sync="is_supervise" width="500px" :close-on-click-modal="false">
			<el-form :model="returnForm">
				<el-form-item label="是否监管机" label-width="120px" prop="is_supervise">
					<el-radio-group v-model="returnForm.is_supervise">
						<el-radio-button label=1>{{ '是' }}</el-radio-button>
						<el-radio-button label=2>{{ '否' }}</el-radio-button>
					</el-radio-group>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="closeReturn()">取 消</el-button>
				<el-button type="primary" @click="handleSubmit()">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>
  
<script>
import myDatePicker from '@/components/myDatePicker'
import customPage from '@/components/customPage'
import goodsDialog from '@/components/goodsDialog'
import { procureList, procureData, sendProcureList, procureApplyData, applyProcure, sendProcureCancel } from '@/api/goods'
export default {
	components: { customPage, goodsDialog, myDatePicker },
	props: ['editItem'],
	data() {
		return {
			searchForm: {
				status: '',
				shop_name: '',
				goods_name: '',
				goods_no: ''
			},
			returnForm: {
				is_supervise: ''
			},
			radio: 2,
			value: true,
			tableData: [],
			options1: [],
			dialogVisible: false,
			is_supervise: false,
			params: {
				procure_id: '',
				price: '',
				orderId: '',
				tradeNo: '',
				realname: '',
				address: '',
				mobile: '',
				province: '',
				is_supervise: '',
				cert_no:''
			}
		}
	},
	methods: {
		// 提交
		handleSubmit() {
			this.params.is_supervise = this.returnForm.is_supervise
			this.params.cert_no=this.editItem.authentic.cert_no
			this.params.realname=this.editItem.authentic.cert_name
			applyProcure(this.params).then(res => {
				this.$emit('getList', true);
				this.dialogVisible = false
				this.is_supervise = false
			})
		},
		// 
		closeReturn() {
			this.is_supervise = false
			this.returnForm.is_supervise = ''
		},
		// 申请采购
		handleClick(item) {
			this.params = {
				procure_id: item.id,
				price: item.price,
				orderId: this.editItem.id,
				tradeNo: this.editItem.trade_no,
				realname: this.editItem.realname,
				address: this.editItem.address,
				mobile: this.editItem.mobile,
				province: this.editItem.prov + this.editItem.city + this.editItem.area
			}
			this.is_supervise = true
			// this.$confirm('您确定要申请采购吗?', '申请', {
			//   confirmButtonText: '确定',
			//   cancelButtonText: '取消'
			// }).then(() => {
			//   applyProcure(data).then(res=>{
			// 		this.$emit('getList', true);
			// 		this.dialogVisible=false
			// 	})
			// }).catch(() => { })
		},
		search() {
			this.getList()
		},
		reset() {
			this.searchForm = {
				status: '',
				shop_name: '',
				goods_name: '',
				goods_no: ''
			}
			this.getList()
		},
		// 获取数据
		getList() {
			// flag为true, 则不刷新表格
			const { page, pageSize } = this.$refs.customPage
			procureList({
				page,
				pageSize,
				...this.searchForm,
			}).then((res) => {
				this.tableData = res.data || []
				this.total = res.total || 0
			})
		},
	},
	watch: {
		dialogVisible(val) {
			if (val) {
				procureApplyData().then(res => {
					this.options1 = res
				})
				let data = {
					page: 1,
					pageSize: 10,
					goods_name: this.searchForm.goods_name,
					status: this.searchForm.status,
					shop_name: this.searchForm.shop_name,
					goods_no: this.searchForm.goods_no
				}
				procureList(data).then(res => {
					this.tableData = res.data || []
					this.total = res.total || 0
				})
			} else {
				this.$refs['ruleForm'].resetFields();
			}
		}
	}
}
</script>
  
<style lang="scss" scoped></style>
  